<template>
  <div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>周报总览</div>
        <el-button
          class="export-btn clearfix"
          size="medium"
          type="primary"
          icon="el-icon-download"
          :loading="exportTable.loading"
          @click="exportExcel()"
        >导出当前数据</el-button>
      </div>
      <el-row :gutter="10" style="margin-top:25px">
        <el-col :span="6">
          <el-date-picker
            v-model="searchKey"
            type="date"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button style="margin-top:5px;" size="small" :type="'primary'" @click="search">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="tableData1"
        border
        empty-text=" "
        :span-method="arraySpanMethod"
        style="width: 100%;margin-top:25px"
      >
        <el-table-column prop="index" label="序号" width="80">
          <template slot-scope="scope">
            <div
              v-if="scope.row.index=='building'"
              style="font-size: 16px;color: rgb(103, 194, 58);"
            >{{scope.row.project_no}}</div>
            <div
              v-if="scope.row.index=='builded'"
              style="font-size: 16px;color: #409eff;"
            >{{scope.row.project_no}}</div>
            <div
              v-if="scope.row.index!='builded'&&scope.row.index!='building'"
              style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
            >
              <i v-if="scope.row.iskey==1" class="el-icon-star-on" style="color:#ea5e56" />
              <i v-if="scope.row.iskey==0" class="el-icon-star-on" style="color:#ddd" />
              {{scope.row.index}}
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_name" label="周" width="80">
          <template slot-scope="scope">
            <span
              v-if="scope.row.index!='builded'&&scope.row.index!='building'"
            >第{{scope.row.week}}周</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_name" label="项目名称" width="120"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_pm" label="项目经理" width="80"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_desc" label="项目概述" width="130"></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="curr_moth_plan"
          label="本月重点工作"
          width="150"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="main_content"
          min-width="200"
          label="重大问题及风险是否需决策讨论（填写'是'或'否'）"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="content"
          min-width="200"
          label="本周重点工作及实际完成率"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="next_content"
          min-width="200"
          label="下周重点工作及计划完成率"
        ></el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="160" prop="create_time" label="创建时间"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="160" prop="update_time" label="更新时间"></el-table-column>
      </el-table>
    </el-card>
    <export-table
      style="display:none"
      ref="exportTable"
      :heads="columns.map(col=>col.col)"
      :rows1="exportTable.rows1"
      :rows2="exportTable.rows2"
      :Html="exportTable.Html"
      :Html2="exportTable.Html2"
    ></export-table>
  </div>
</template>
<script>
import workAPI from "@apis/work";
import { mapState } from "vuex";
import exportTable from "@components/export-table";
import exportTableMixin from "@components/query-table/mixins/export-table";
export default {
  data() {
    return {
      searchKey: "",
      loading: false,
      uid: "",
      tableData1: [],
      tableData2: [],
      buildingLen: "",
      columns: [
        { col: "序号", prop: "xh" },
        { col: "周", prop: "week" },
        { col: "项目名称", prop: "project_name" },
        { col: "项目经理", prop: "project_pm" },
        { col: "项目概述", prop: "project_desc" },
        { col: "本月工作重点", prop: "curr_moth_plan" },
        {
          col: "重大问题及风险",
          prop: "main_content",
        },
        { col: "本周重点工作及实际完成率", prop: "content" },
        { col: "下周重点工作及计划完成率", prop: "next_content" },
        { col: "创建时间", prop: "create_time" },
        { col: "更新时间", prop: "update_time" },
      ],
      workAPI: workAPI.getAllWeekList,
      exportTitle: "",
    };
  },
  mixins: [exportTableMixin],
  components: { exportTable },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
  },
  created() {
    this.uid = this.userInfo.user.id;
    this.getList();
  },
  mounted() {},
  methods: {
    search() {
      console.log(this.searchKey, "searchKey");
      this.getList();
    },
    getList() {
      this.loading = true;
      workAPI
        .getAllWeekList(this.searchKey)
        .then((res) => {
          let building = { ...res.building };
          let builded = { ...res.builded };
          let Html = `在建项目（共${building.projectTotal}个`;
          let len = building.list.length;
          this.buildingLen = building.weeklist.length;
          if (len < 1) {
            Html += ")";
          } else {
            Html += "，";
            building.list.map((item, index) => {
              Html += `${index === 0 ? "其中" : ""}${item.name + item.num}个${
                len != index + 1 ? "，" : "）"
              }`;
            });
          }
          this.tableData1 = [
            {
              index: "building",
              project_no: Html,
            },
          ];
          building.weeklist.map((item, index) => {
            this.tableData1.push({
              index: index + 1,
              ...item,
            });
          });

          let Html2 = `重点运维项目（共${builded.projectTotal}个`;
          let len2 = builded.list.length;
          if (len2 < 1) {
            Html2 += ")";
          } else {
            Html2 += "，";
            builded.list.map((item, index) => {
              Html2 += `${index === 0 ? "其中" : ""}${item.name + item.num}个${
                len2 != index + 1 ? "，" : "）"
              }`;
            });
          }
          this.tableData2 = [
            {
              index: "builded",
              project_no: Html2,
            },
          ];
          this.buildedNumber = {
            projectTotal: builded.projectTotal,
            list: builded.list,
          };
          builded.weeklist.map((item, index) => {
            this.tableData2.push({
              index: index + 1,
              ...item,
            });
          });
          this.tableData1 = [...this.tableData1, ...this.tableData2];
          //   console.log(res, "getAllWeekListRES");
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let len = this.buildingLen * 1 + 1;
      if (rowIndex === 0 && columnIndex === 0) {
        return [1, 11];
      }
      if (rowIndex === len && columnIndex === 0) {
        return [1, 11];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// .el-input__inner {
//   height: 36px !important;
//   margin-top: 2.5px;
// }
.box-title-position {
  div {
    display: inline-block;
  }
  .export-btn {
    float: right;
    margin-top: -3px;
  }
}
</style>